{% macro donut_chart(percent, title, caption) %}
<div class="donut-chart">
  <div class="chart-wrapper">
    <svg class="chart" style="{% if percent != None %}--percent: {{ percent / 100 }}{% endif %}">
      <circle class="empty" cx="50%" cy="50%" r="67.5px" />
      {% if percent != None %}
      <circle class="slice {{ percent | percent_to_color }}" cx="50%" cy="50%" r="67.5px" />
      {% endif %}
    </svg>
    <div class="shadow"></div>
    <div class="label">
      {%- if percent == None %}未部署
      {%- else %}{{ '{0:.0f}%'.format(percent) }}{% endif -%}
    </div>
  </div>
  <div class="title">{{ title }}</div>
  <div class="desc">{{ caption | br }}</div>
</div>
{% endmacro %}

{% macro rectangle_chart(percent, title, name, mem_used, mem_total, temp, mode) %}
<div class="donut-chart" style="justify-content: left; align-items: center; text-align: left">
  <div class="chart-wrapper">
    <div class="title" style="scale: 60%">{{ title + name }}</div>
    <div class="desc">{{ mode }}</div>
    <div class="chart">
      <div class="bar {{ percent | percent_to_color }}" style="width: {{ percent }}%;"></div>
    </div>
    <div class="label">
      {%- if percent == None %}未部署
      {%- else %}{{ '{0:.0f}%'.format(percent) }}{% endif -%}
    </div>
  </div>
</div>
{% endmacro %}


{% macro header(d) %}
<div class="card header splitter">
  {% for info in d.bots %}
  <div class="account">
    <img class="avatar" data-src="/api/bot_avatar/{{ info.self_id }}" />
    <div class="description">
      <div class="nickname">{{ info.nick }}</div>
      <div class="status label-container">
        <span class="label purple">{{ info.adapter }}</span>
        <span class="label green">Bot已连接 {{ info.bot_connected }}</span>
        <span class="label blue">收 {{ info.msg_rec }}</span>
        <span class="label orange">发 {{ info.msg_sent }}</span>
      </div>
    </div>
  </div>
  {% endfor %}
  <div class="extra label-container">
    <span class="label gray">NoneBot运行 {{ d.nonebot_run_time }}</span>
    <span class="label gray">系统运行 {{ d.system_run_time }}</span>
  </div>
</div>
{% endmacro %}

{% macro cpu_mem(d) %}
{% set freq = d.cpu_freq | format_cpu_freq %}
{% set ram_used = d.memory_stat.used | auto_convert_unit %}
{% set ram_total = d.memory_stat.total | auto_convert_unit %}
{% set swap_used = d.swap_stat.used | auto_convert_unit %}
{% set swap_total = d.swap_stat.total | auto_convert_unit %}
<div class="card cpu-mem-usage donut-chart-line">
  {{ donut_chart(d.cpu_percent, "CPU", "{}核 {}线程 {}\n{}".format(d.cpu_count, d.cpu_count_logical, freq, d.cpu_brand)) }}
  {{ donut_chart(d.memory_stat.percent, "RAM", "{} / {}").format(ram_used, ram_total) }}
  {{ donut_chart(d.swap_stat.percent, "SWAP", "{} / {}").format(swap_used, swap_total) }}
</div>
{% endmacro %}

{% macro gpu(d) %}
{% for gpu in d.render_gpu_info %}

    {% set gpu_name = gpu.name or "Unknown GPU" %}
    {% set gpu_id = gpu.device_id or 0 %}
    {% set gpu_load = gpu.load or 0 %}
    {% set gpu_mem_used = gpu.used_memory or 0 %}
    {% set gpu_mem_total = gpu.total_memory or 0 %}
    {% set gpu_temp = gpu.temperature or "N/A" %}
    {% set gpu_mode = gpu.driver_mode or "Unknown Mode" %}
    {% set gpu_percent = gpu.percent or 0 %}
    {% set gpu_fan_speed = gpu.fan_speed or "N/A" %}
    {% set gpu_power_usage = gpu.power_usage or "N/A" %}
    {% set gpu_performance_state = gpu.performance_state or "N/A" %}
    {% set gpu_ecc_mode = gpu.ecc_mode or "Unknown" %}

<div class="card disk-info splitter">
<div class="title" style="color: #0a3069">GPU {{ gpu_id }}  {{ gpu_name }}  {{ gpu_mem_total }} MB </div>
<div class="title">{{ gpu_mode }} 模式  -  ECC模式: {{ gpu_ecc_mode }}</div>
<div class="desc">温度: {{ gpu_temp }} ℃  |  风扇: {{ gpu_fan_speed }}  |  功耗: {{ gpu_power_usage }} W  |  工作性能: P{{ gpu_performance_state }} </div>
  <div class="list-grid disk-usage">
        <div>负载: </div>
        <div class="progress-bar">
        <div class="background"></div>
        <div class="progress {{ gpu_load | percent_to_color }}" style="width: {{ gpu_load }}%"></div>
        <div class="label">{{ gpu_load / 100 }}</div>
        </div>
        <div class="align-right">
        {%- if gpu_load %}{{ '{0:.1f}%'.format(gpu_load) }}
        {%- else %}0%{% endif -%}
        </div>
        <div>显存: </div>
        <div class="progress-bar">
          <div class="background"></div>
            <div class="progress {{ gpu_percent | percent_to_color }}" style="width: {{ gpu_percent }}%"></div>
            <div class="label">{{ gpu_mem_used }} MB / {{gpu_mem_total}} MB</div>
        </div>
        <div class="align-right">
          {%- if gpu_percent %}{{ '{0:.1f}%'.format(gpu_percent) }}
          {%- else %}0%{% endif -%}
        </div>
{#          <div class="list-grid disk-io">#}
{#            <div style="align-items: flex-start">GPU {{ gpu_id + gpu_name}}</div>#}
{#            <div>温度</div>#}
{#            <div class="align-right">{{ gpu_temp }} ℃</div>#}
{#            <div>|</div>#}
{#            <div>DM</div>#}
{#            <div class="align-right">{{ gpu_mode }}</div>#}
{#          </div>#}




    </div>
    </div>
    {% endfor %}
{% endmacro %}


{% macro disk(d) %}
<div class="card disk-info splitter">
  <div class="list-grid disk-usage">
    {% for it in d.disk_usage %}
    <div>{{ it.name }}</div>
    <div class="progress-bar">
      <div class="background"></div>
      {% if it.exception %}
      <div class="label">{{ it.exception }}</div>
      {% else %}
      <div class="progress {{ it.percent | percent_to_color }}" style="width: {{ it.percent }}%"></div>
      <div class="label">{{ it.used | auto_convert_unit }} / {{ it.total | auto_convert_unit }}</div>
      {% endif %}
    </div>
    <div class="align-right">
      {%- if it.percent %}{{ '{0:.1f}%'.format(it.percent) }}
      {%- else %}??.?%{% endif -%}
    </div>
    {% endfor %}
  </div>

  {% if d.disk_io -%}
  <div class="list-grid disk-io">
    {% for it in d.disk_io %}
    <div>{{ it.name }}</div>
    <div>读</div>
    <div class="align-right">{{ it.read | auto_convert_unit(suffix='/s') }}</div>
    <div>|</div>
    <div>写</div>
    <div class="align-right">{{ it.write | auto_convert_unit(suffix='/s') }}</div>
    {% endfor %}
  </div>
  {%- endif %}
</div>
{% endmacro %}

{% macro network(d) %}
<div class="card network-info splitter">
  <div class="list-grid network-io">
    {% for it in d.network_io %}
    <div>{{ it.name }}</div>
    <div>↑</div>
    <div class="align-right">{{ it.sent | auto_convert_unit(suffix='/s') }}</div>
    <div>|</div>
    <div>↓</div>
    <div class="align-right">{{ it.recv | auto_convert_unit(suffix='/s') }}</div>
    {% endfor %}
  </div>
  <div class="list-grid network-connection-test">
    {% for it in d.network_connection %}
    <div>{{ it.name }}</div>
    {% if it.error %}
    <div class="error">{{ it.error }}</div>
    {% else %}
    <div>{{ it.status }} {{ it.reason }}</div>
    <div>|</div>
    <div>{{ '{0:.2f}ms'.format(it.delay) }}</div>
    {% endif %}
    {% endfor %}
  </div>
</div>
{% endmacro %}

{% macro process(d) %}
<div class="card process-info splitter">
  <div class="list-grid process-usage">
    {% for it in d.process_status %}
    <div>{{ it.name }}</div>
    <div>CPU</div>
    <div class="align-right">{{ '{0:.1f}%'.format(it.cpu) }}</div>
    <div>|</div>
    <div>MEM</div>
    <div class="align-right">{{ it.mem | auto_convert_unit }}</div>
    {% endfor %}
  </div>
</div>
{% endmacro %}

{% macro footer(d) %}
<div class="footer">
  NoneBot {{ d.nonebot_version }} × PicStatus {{ d.ps_version }} | {{ d.time }}<br />
  {{ d.python_version }} | {{ d.system_name }}
</div>
{% endmacro %}
